<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="表格操作"
    :close-on-click-modal="false"
    @close="dialogVisible = false"
  >
  <el-form :model="configData">
        <el-form-item label="筛选接口">
          <el-select
            v-model="configData.selectRequest"
            value-key="id"
            filterable
            placeholder="请选择接口"
            @change="updateSelectedRequest"
          >
            <template v-for="(item, index) in requestList">
              <el-option
                :key="index"
                :label="item.requestName"
                :value="item"
              ></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="筛选条件">
          <question content="添加一个筛选条件"></question>
          <el-button
            type="primary"
            size="mini"
            @click="onEditFilter()"
            >添加条件</el-button
          >
          <el-table
            :data="configData['selects']"
            border
            fit
            size="small"
            highlight-current-row
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
          >
            <el-table-column align="center" label="筛选名">
              <template slot-scope="{ row }">
                <span>{{ row.label }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="关联数据">
              <template slot-scope="{ row }">
                <span>{{ row.selectModel }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="提示语">
              <template slot-scope="{ row }">
                <span>{{ row.placeholder }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="可选项">
              <template slot-scope="{ row }">
                <span v-for="(item, index) in row.options" :key="index"
                  >{{ item.name }}: {{ item.value }}<br
                /></span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="筛选方式">
              <template slot-scope="{ row }">
                <span>{{
                  row.selectType === 'select' ? '下拉选择' : '手动输入'
                }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="200px">
              <template slot-scope="{ row }">
                  <el-button type="primary" @click="onEditFilter(row)"
                    >修改</el-button
                  >
                <el-button
                  size="mini"
                  type="danger"
                  @click="onDeleteFilter(row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="批量操作">
          <el-button
            type="primary"
            @click="onEditBulkOperation()">
            添加批量操作
          </el-button>
            <el-table
              border
              fit
              size="small"
              highlight-current-row
              :data="configData.bulkOperations"
            >
            <el-table-column align="center" label="操作类型">
                <template slot-scope="{ row }">
                  <span> {{ row.operationType == 0 ? '简单操作' : '前端内置弹框' }} </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作名称">
                <template slot-scope="{ row }">
                  <span> {{ row.name }} </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作说明">
                <template slot-scope="{ row }">
                  <span> {{ row.desc }} </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="api">
                <template slot-scope="{ row }">
                  <span> {{ row.api }} </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="请求类型">
                <template slot-scope="{ row }">
                  <span> {{ row.requestType }} </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="行数据筛选">
                <template slot-scope="{ row }">
                  <span> {{ row.rowFilter }} </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="body参数">
                <template slot-scope="{ row }">
                  <span> {{ row.bodyParams }} </span>
                </template>
              </el-table-column>
              <el-table-column label="操作确认" align="center" width="75px">
                <template slot-scope="{ row }">
                  <span> {{ row.needConfirm ? '是' : '否' }} </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="展示样式">
                <template slot-scope="{ row }">
                  <span> {{ row.displayType }} </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="200px">
                <template slot-scope="{ row }">
                  <el-button type="primary" @click="onEditBulkOperation(row)"
                    >修改</el-button
                  >
                  <el-button type="danger" @click="onDeleteOperation(row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
        </el-form-item>
        <el-form-item label="全局操作">
          <el-button
            type="primary"
            @click="onEditGlobalOperation()">
            添加全局操作
          </el-button>
            <el-table
              border
              fit
              size="small"
              highlight-current-row
              :data="configData.globalOperations"
            >
            <el-table-column align="center" label="操作类型">
                <template slot-scope="{ row }">
                  <span> {{ row.operationType == 0 ? '简单操作' : '前端内置弹框' }} </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作名称">
                <template slot-scope="{ row }">
                  <span> {{ row.name }} </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作说明">
                <template slot-scope="{ row }">
                  <span> {{ row.desc }} </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="api">
                <template slot-scope="{ row }">
                  <span> {{ row.api }} </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="请求类型">
                <template slot-scope="{ row }">
                  <span> {{ row.requestType }} </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="行数据筛选">
                <template slot-scope="{ row }">
                  <span> {{ row.rowFilter }} </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="body参数">
                <template slot-scope="{ row }">
                  <span> {{ row.bodyParams }} </span>
                </template>
              </el-table-column>
              <el-table-column label="操作确认" align="center" width="75px">
                <template slot-scope="{ row }">
                  <span> {{ row.needConfirm ? '是' : '否' }} </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="展示样式">
                <template slot-scope="{ row }">
                  <span> {{ row.displayType }} </span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作" width="200px">
                <template slot-scope="{ row }">
                  <el-button type="primary" @click="onEditGlobalOperation(row)"
                    >修改</el-button
                  >
                  <el-button type="danger" @click="onDeleteGlobalOperation(row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
        </el-form-item>
        <el-form-item label="时间筛选">
          <el-select
            v-model="configData['time_select']"
            filterable
            placeholder="是否需要时间筛选"
          >
            <el-option :label="'需要'" :value="true"></el-option>
            <el-option :label="'不需要'" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间格式" v-if="configData['time_select']">
          <el-select
            v-model="configData['timeFormat']"
            placeholder="选择时间格式">
            <el-option label="字符串" value="timestamp"></el-option>
            <el-option label="数值" value="timemillis"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间字段" v-if="configData['time_select']">
          <el-select
            v-model="configData['startTimeField']"
            filterable
            placeholder="开始时间字段"
          >
            <template
              v-for="(item, idx) in JSON.parse(
                configData['selectRequest'].params
              )"
            >
              <el-option
                :key="idx"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="结束时间字段" v-if="configData['time_select']">
          <el-select
            v-model="configData['endTimeField']"
            filterable
            placeholder="结束时间字段"
          >
            <template
              v-for="(item, idx) in JSON.parse(
                configData['selectRequest'].params
              )"
            >
              <el-option
                :key="idx"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="数据分页">
          <el-select
            v-model="configData['pagination']"
            filterable
            placeholder="是否需要数据分页"
          >
            <el-option :label="'不需要'" :value="0"></el-option>
            <el-option :label="'offset-limit类型'" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据展示形式">
          <el-select
            v-model="configData['resultHandler']"
            filterable
            placeholder="数据展示形式"
          >
            <el-option :label="'表格'" :value="'table'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="结果列表的key值">
          <el-input
            v-model="configData['listKey']"
            filterable
            placeholder="list/data"
          >
          </el-input>
        </el-form-item>
        <el-form-item
          label="结果数量的key值"
          v-if="configData['pageination'] !== 0"
        >
          <el-input
            v-model="configData['countKey']"
            filterable
            placeholder="count"
          >
          </el-input>
        </el-form-item>
      </el-form>
    <span slot="footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="onOK">确定</el-button>
    </span>
    <filter-edit-dialog
      :visible.sync="editDialogVis"
      :value="filterToEdit"
      :request="configData.selectRequest"
      @success="onEditOK"
      ></filter-edit-dialog>
    <operation-edit-dialog
      :visible.sync="editOperationDialogVis"
      :value="operationToEdit"
      :isBulk="true"
      @success="onEditOperationOK"
      ></operation-edit-dialog>
        <operation-edit-dialog
      :visible.sync="globalOperationDialogVis"
      :value="globalOperationToEdit"
      @success="onEditGlobalOperationOK"
      ></operation-edit-dialog>
  </el-dialog>
</template>

<script>
import { deepClone } from '@/utils'
import FilterEditDialog from './filterEditDialog.vue'
import OperationEditDialog from './operationEditDialog.vue'
import question from "../../question"
export default {
  name: 'PageEditDialog',
  components: { FilterEditDialog, question, OperationEditDialog },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    value: {
      type: Object
    },
    requestList: {
      type: Array
    }
  },
  data() {
    return {
      editOperationDialogVis: false,
      operationToEdit: {},
      editDialogVis: false,
      globalOperationToEdit: {},
      globalOperationDialogVis: false,
      filterToEdit: {},
      configData: this.value
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible')
      },
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.configData = deepClone(this.value)
      }
    },
  },
  methods: {
    updateSelectedRequest(value) {
      this.$set(this.configData, 'selectRequest', value)
    },

    onEditBulkOperation(op) {
      if (!op) {
        op = {
          operationType: 0,
          name: '',
          desc: '',
          api: '',
          rowFilter: '',
          bodyParams: '',
          requestType: 'post',
          needConfirm: true,
          displayType: 'primary',
          dialogName: ''
        }
      } else {
        if (!op.id) {
          op.id = Math.random()
        }
        op = deepClone(op)
      }
      this.operationToEdit = op
      this.editOperationDialogVis = true
    },

    onDeleteOperation(op) {
      const index = this.configData.bulkOperations.indexOf(op)
      if (index >= 0) {
        this.configData.bulkOperations.splice(index, 1)
      }
    },

    onEditOperationOK(op) {
      if (op.id) {
        const index = this.configData.bulkOperations.findIndex(item => { return item.id === op.id })
        if (index >= 0) {
          this.$set(this.configData.bulkOperations, index, op)
        } else {
          this.configData.bulkOperations.push(op)
        }
      } else {
        if (!this.configData.bulkOperations) {
          this.configData.bulkOperations = []
        }
        this.configData.bulkOperations.push(op)
      }
      this.editOperationDialogVis = false
    },

    onEditGlobalOperation(op) {
      if (!op) {
        op = {
          operationType: 0,
          name: '',
          desc: '',
          api: '',
          rowFilter: '',
          bodyParams: '',
          requestType: 'post',
          needConfirm: true,
          displayType: 'primary',
          dialogName: ''
        }
      } else {
        if (!op.id) {
          op.id = Math.random()
        }
        op = deepClone(op)
      }
      this.globalOperationToEdit = op
      this.globalOperationDialogVis = true
    },

    onDeleteGlobalOperation(op) {
      const index = this.configData.globalOperations.indexOf(op)
      if (index >= 0) {
        this.configData.globalOperations.splice(index, 1)
      }
    },

    onEditGlobalOperationOK(op) {
      if (op.id) {
        const index = this.configData.globalOperations.findIndex(item => { return item.id === op.id })
        if (index >= 0) {
          this.$set(this.configData.globalOperations, index, op)
        } else {
          this.configData.globalOperations.push(op)
        }
      } else {
        if (!this.configData.globalOperations) {
          this.configData.globalOperations = []
        }
        this.configData.globalOperations.push(op)
      }
      this.globalOperationDialogVis = false
    },
    
    onEditFilter(op) {
      if (!op) {
        op = {
          selectModel: '',
          placeholder: '',
          label: '',
          selectType: 'select',
          options: []
        }
      } else {
        if (!op.id) {
          op.id = Math.random()
        }
        op = deepClone(op)
      }
      this.filterToEdit = op
      this.editDialogVis = true
    },

    onDeleteFilter(op) {
      const index = this.configData.selects.indexOf(op)
      if (index >= 0) {
        this.configData.selects.splice(index, 1)
      }
    },

    onEditOK(op) {
      if (op.id) {
        const index = this.configData.selects.findIndex(item => { return item.id === op.id })
        if (index >= 0) {
          this.$set(this.configData.selects, index, op)
        } else {
          this.configData.selects.push(op)
        }
      } else {
        if (!this.configData.selects) {
          this.configData.selects = []
        }
        this.configData.selects.push(op)
      }
      this.editDialogVis = false
    },

    onOK() {
      this.$emit('success', this.configData)
    },
  },
}
</script>

<style scoped>
</style>
